<template>
	<view class="function_wrap">

		<view class="function_list" v-for="(item, index) in functionData" :key="index">
			<view class="function_item space-between" v-for="(nav, index) in item" :key="index"
				@click="clickRouter(nav)">
				<view class="center">
					<text :class="nav.icon"></text>
					<text>{{ nav.title }}</text>
				</view>
				<view class="center">
					<!-- @click.stop="() => {}" 阻止事件冒泡 --> 
					<switch @click.stop="() => {}" :checked="nav.checked" @change="clickRouter(nav)"
						v-if="nav.checked || nav.checked === false" color="#345dc2" />
					<image v-if="nav.src" :src="nav.src" mode=""></image>
					<text v-if="nav.text" class="right_text">{{ nav.text }}</text>
					<text v-if="nav.rightIcon" :class="nav.rightIcon"></text>
				</view>

			</view>
		</view> 

	</view>
</template>

<script>
	export default {
		name: "l-function-list",
		props: {
			functionData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			// 路由跳转
			clickRouter(item) {
				if (item.page) {
					// mixin文件中有定义 navTo
					this.navTo(item.page, {
						login: item.login
					})
					return
				}
				if (item.event) {
					// 触发绑定的事件 
					this.$emit(item.event, item)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.function_list {
		height: 100%;
		margin-top: 20rpx;
		background-color: #fff;

		.function_item {
			padding: 28rpx 40rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
			align-items: center;
			.iconfont{
				color: #95a3b6;
			}

			.mxg-icon {
				margin-right: 20rpx;
			}
			
			.right_text{
				font-size: 34rpx;
				color: #95a3b6;
				margin: 20rpx;
			}
		}

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
</style>
